<template>
  <section class="page-header">
    <div class="header-background">
    <canvas class="background-canvas"></canvas>
    </div>
    <el-row class="header-content">
    <el-col :span="12" class="header-title">
        <span>桂花湾罐区</span> 
    </el-col>
    <el-col :span="12" class="header-menu">
        <div :class="['header-menu-item', currentActive === 'map' ? 'active-menu' : '']" @click="onMenuClick('map')">
        <i class="el-icon-map-location"></i>
        <div>地图</div>
        </div>
        <div class="header-menu-item">
        <div :class="['header-menu-item', currentActive === 'list' ? 'active-menu' : '']" @click="onMenuClick('list')">
            <i class="el-icon-s-data"></i>
            <div>列表</div>
        </div>
        </div> 
    </el-col>
    </el-row>
  </section>
</template>

<script>
import Particles from "particlesjs";
export default {
  name: 'pageHeader',
  data() {
    return {
      currentActive: ''
    }
  },  
  mounted() {
    this.onInitCanvas();
  },
  methods: {
    // 初始化头部canvas
    onInitCanvas() {
      Particles.init({
        // 选择canvas画布元素
        selector: '.background-canvas',
        // 设置最大粒子数
        maxParticles: 30,
        // 设置粒子的移动速度
        speed: 0.2,
        // 设置粒子颜色
        color: '#8ACAFF',
        // 开启点连线
        connectParticles: true,
        // 设置
        minDistance: 60,
        // 设置响应式配置项的调整
        responsive: [
          {
            // 当浏览器窗口宽小于768像素大小采用以下配置
            breakpoint: 768,
            options: {
              maxParticles: 50,
              color: '#9400D3',
              connectParticles: false
            }
          }, {
            // 当浏览器窗口宽小于425像素大小采用以下配置
            breakpoint: 425,
            options: {
              maxParticles: 50,
              connectParticles: true
            }
          }, {
            // 当浏览器窗口宽小于320像素大小采用以下配置
            breakpoint: 320,
            options: {
              maxParticles: 0
            }
          }
        ]
      })
    },
    onMenuClick(menu) {
      if(menu === this.currentActive) {
        return;
      }
      this.currentActive = menu;
      this.$router.push(`/${menu}`)
    }
  },
  watch: {
    $route(to) {
      this.currentActive = to.name;
    }
  }
}
</script>

<style lang="scss">
.page-header {
  width: 100%;
  height: 70px;
  border-radius: 4px;
  position: relative;
  .header-background{
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #062b23, #2b4858, #08251f);
    .background-canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
  }
  .header-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    padding: 0 15px;
    .header-title {
      height: 100%;
      color: #00ecfc;
      font-size: 26px;
      font-weight: 900;
      text-align: left;
      display: flex;
      align-items: center;
      span {
        cursor: pointer;
      }
    }
    .header-menu {
      display: flex;
      align-items: center;
      height: 100%;
      .header-menu-item {
        height: 100%;
        width: 200px;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        color: #fff;
        font-size: 18px;
        transition: all .6s;
      }
      .header-menu-item:hover {
        color: #00ecfc;
      }
      .active-menu {
        color: #00ecfc;
        background: rgba(2, 201, 218, 0.47);
        padding: 0 20px;
      }
    }
  }
}

</style>